<template>
  <!-- 更多按钮，屏幕宽度小于1009时显示 -->
  <div v-if="$store.state.screenWidth < 1009">
    <i
      :class="isShowMore ? 'iconfont icon-guanbi' : 'iconfont icon-caidan'"
      @click="moreClick"
    ></i>
  </div>
</template>

<script>
export default {
  name: "MoreBtn",
  data(){
      return{
          isShowMore:false
      }
  },
  methods: {
    // 点击更多按钮后调用
    moreClick() {
      this.isShowMore = !this.isShowMore;
    //   将isShowMore发送给父组件
      this.$emit('sendIsShowMore',this.isShowMore);
    },
  },
};
</script>

<style lang="less" scoped>
// 菜单图标
.icon-caidan {
  // 图标大小
  font-size: 30px;
  // 粗体
  font-weight: bold;
  // 小手
  cursor: pointer;
}
// 关闭图标
.icon-guanbi {
  // 图标大小
  font-size: 20px;
  // 粗体
  font-weight: bold;
  // 小手
  cursor: pointer;
  // 右外边距
  margin-right: 5px;
}
/*在浏览器视口宽小于375px时生效*/
@media (max-width: 375px) {
  // 菜单图标
  .icon-caidan {
    // 图标大小
    font-size: 25px;
  }
  // 关闭图标
  .icon-guanbi {
    // 图标大小
    font-size: 16px;
  }
}
</style>